<template>
  <div class="indexBody">
    <div style="display: flex;justify-content: center;align-items: center" >
<!--      <span class="text"></span>-->
    </div>
    <div :class="weather">
      <div class="weatherInfo">
        <div class="weatherInfoNew">
          <span>当前天气  | <i class="el-icon-location"/>{{ weatherNowData.location.name }}</span>
        </div>
        <div style="display: flex;align-items: center">
          <i style="font-size: 1.3rem;margin-right: 0.2rem;color: #426CFF" class="iconfont icon-wenduji"/>
          <div style="display: flex;align-items: center">
            <span class="weatherInfoSsd">{{ weatherNowData.now.temp }}</span>
            <div style="display: flex;flex-direction: column;align-content: space-between">
              <span class="weatherInfoText">{{ weatherNowData.now.text }}</span>
              <span>℃</span>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex;justify-content: center;align-items: center">
<!--        <i style="font-size:2rem;color: #FFFFFF" :class="`qi-${weatherNowData.now.icon}`" />-->
<!--        <i style="font-size:2rem;color: #FFFFFF" />-->
      </div>
    </div>
    <div class="weatherInfoBottom">
      <div class="infoBottomText">
        <img class="imgSize" src="./assets/sd@2x.png">
        <div>
          <div>{{ weatherNowData.now.humidity }}%</div>
          <div>湿度</div>
        </div>
      </div>
      <div class="infoBottomText">
        <img class="imgSizeFx" src="./assets/fx@2x.png">
        <div>
          <div>{{ weatherNowData.now.windDir }} {{ weatherNowData.now.windScale }}级</div>
          <div>风向 风级</div>
        </div>
      </div>
      <div class="infoBottomText">
        <img class="imgSizeFx" src="./assets/jyl@2x.png">
        <div>
          <div>{{ weatherNowData.now.precip }}MM</div>
          <div>降水</div>
        </div>
      </div>
      <div class="infoBottomText">
        <img class="imgSizeFx" src="./assets/njd@2x.png">
        <div>
          <div>{{ weatherNowData.now.vis }}公里</div>
          <div>能见度</div>
        </div>
      </div>
    </div>
    <div class="menuWeather">
      <div class="menuText" @click="openWxMap(3)">
        <img class="menuImg" src="./assets/ld.png">
        <div>
          雷 达
        </div>
      </div>
      <div class="menuText" @click="openWxMap(2)">
        <img class="menuImg" src="./assets/yj.png">
        <div>
          预警信号
        </div>
      </div>
      <div class="menuText" @click="openWxMap(1)">
        <img class="menuImg" src="./assets/sk.png">
        <div>
          实况检测
        </div>
      </div>
      <div class="menuText" @click="openWxJyMap()">
        <img class="menuImg" src="./assets/xy.png">
        <div>
          降雨预报
        </div>
      </div>
    </div>
    <div class="hoursWeather">
      聊城市24小时天气预报
    </div>
    <hourly-forecast ref="hourlyForecast"/>
    <div class="hoursWeather">
      聊城市一周内天气预报
    </div>
    <week-forecast ref="weekForecast"/>
  </div>
</template>

<script>
import "qweather-icons/font/qweather-icons.css";
import hourlyForecast from "@/wxViews/components/hourlyForecast.vue";
import weekForecast from "@/wxViews/components/weekForecast.vue";
import 'lib-flexible'
import {weatherInfo} from "@/api/cityInfo";
export default {
  name: "index",
  components:{
    hourlyForecast,
    weekForecast
  },
  data(){
    return {
      weatherNowData: {},
      weather:'weatherQ'
    }
  },
  created() {
    this.getWeatherNow()
  },
  methods:{
    //获取实时天气
    async getWeatherNow() {
      // let httpUrl = 'https://api.seniverse.com/v3/weather/now.json?key=SfOcYG07nsrQQ2w8G&location=聊城&language=zh-Hans&unit=c'
      // let resJson = await fetch(httpUrl)
      // let res = await resJson.json()
      // this.weatherNowData = res.results[0]
      let resJson = await weatherInfo({
        location: "101121701",
        lang: "zh",
        cityName: "聊城",
      });
      let res = JSON.parse(resJson.data);
      console.log(res)
      this.weatherNowData = res;
      this.weatherNowData.location = { name: "聊城市", path: "山东省,中国" };
      //动态改变背景图
      this.setBackgroundImage()
    },
    setBackgroundImage(){
      if (this.weatherNowData.now.text.indexOf('云') !== -1 || this.weatherNowData.now.text.indexOf('阴') !== -1){
        this.weather = 'weatherYun'
      }else if (this.weatherNowData.now.text.indexOf('雨') !== -1){
        this.weather = 'weatherYu'
      }else if (this.weatherNowData.now.text.indexOf('雪') !== -1){
        this.weather = 'weatherX'
      }else if (this.weatherNowData.now.text.indexOf('沙') !== -1 || this.weatherNowData.now.text.indexOf('尘') !== -1){
        this.weather = 'weatherF'
      }else {
        this.weather = 'weatherQ'
      }
    },
    //
    openWxMap(index){
      this.$router.push({
        path: '/wxMap',
        query:{
          radio:index
        }
      })
    },
    //
    openWxJyMap(){
      this.$router.push({
        path: '/wxWeather',

      })
    },
  }
}
</script>

<style lang="scss" scoped>
.indexBody{
  height: 760px;
  background-color: #60AEFF;
}
.text{
  margin-top: 40px;
  font-size: 16px;
}
.weatherQ{
  background: url('./assets/background-q.png') no-repeat;
  background-size: cover;
  padding: 12px 12px 12px 0px;
  margin-top: 0px;
  display: flex;
  justify-content: space-around;
  margin-left: -50px;
}
.weatherF{
  background: url('./assets/background-f.png') no-repeat;
  background-size: cover;
  padding: 12px 12px 12px 0px;
  margin-top: 0px;
  display: flex;
  justify-content: space-around;
  margin-left: -50px;
}
.weatherYu{
  background: url('./assets/background-y.png') no-repeat;
  background-size: cover;
  padding: 12px 12px 12px 0px;
  margin-top: 0px;
  display: flex;
  justify-content: space-around;
  margin-left: -50px;
}
.weatherYun{
  background: url('./assets/background-yun.png') no-repeat;
  background-size: cover;
  padding: 12px 12px 12px 0px;
  margin-top: 0px;
  display: flex;
  justify-content: space-around;
  margin-left: -50px;
}
.weatherX{
  background: url('./assets/background-x.png') no-repeat;
  background-size: cover;
  padding: 12px 12px 12px 0px;
  margin-top: 0px;
  display: flex;
  justify-content: space-around;
  margin-left: -50px;
}
.weatherInfo{
  font-size: 14px;
  .weatherInfoNew{
    //font-family: Source Han Sans CN;
    margin-bottom: 14px;
    font-weight: 500;
    color: #1A2545;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .weatherInfoSsd{
    font-size: 48px;
    margin-right: 5px;
  }
  .weatherInfoText{
    margin-bottom: 4px;
  }
}
.weatherInfoBottom{
  padding: 6px;
  background: linear-gradient(92deg, #000000 0%, #C6DDFC 0%, #86B0FE 100%);
  border-radius: 0px 0px 24px 24px;
  border: 1px solid #F2F6FC;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .infoBottomText{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    .imgSize{
      height: 24px;
      width: 16px;
      margin-right: 10px;
    }
    .imgSizeFx{
      height: 24px;
      width: 24px;
      margin-right: 10px;
    }
  }
}
.menuWeather{
  padding: 15px;
  margin: 14px;
  background: linear-gradient(89deg, #ECF2FE 0%, #E4ECFF 100%);
  border-radius: 10px;
  border: 1px solid #F2F6FC;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  .menuText{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .menuImg{
    height: 30px;
    width: 30px;
    margin-bottom: 5px;
  }
}
.hoursWeather{
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 18px;
  margin-left: 14px;
  color: #FFFFFF;
}
</style>
